<template>
    <div class="list" >
        <div class="wrapper" ref="wrapper">
          <div>
            <div class="area border-topbottom">
              <div class="title">当前城市</div>
              <div class="button-list">
                <div class="button-wrapper">
                  <div class="button">{{ this.$store.state.city }}</div>
                </div>
              </div>


            </div>
            <div class="area border-topbottom">
              <div class="title">热门城市</div>
              <div class="button-list" >
                <div class="button-wrapper" v-for="(item,index) of hotCities" :key="index" @click="handleIndexCity(item.name)">
                  <div class="button">{{ item.name }}</div>
                </div>
              </div>
            </div>
            <div class="area border-topbottom" v-for="(item,key) of  cities" :key="key" :ref="key">
              <div class="title">{{ key }}</div>
              <div class="item-list">
                <div class="item border-bottom" v-for="innerItem of item" :key="innerItem.id" @click="handleIndexCity(innerItem.name)">{{ innerItem.name }}</div>


              </div>
            </div>

            </div>
          </div>

        </div>





</template>

<script>
  import BetScroll from 'better-scroll'
    export default {
        name: "citylist",
      props:{
        cities:{
          type:Object
        },
        hotCities:{
          type: Array
        },
        letter:{
          type:String
        }
      },
      data() {
        return {

        }
      },
      watch:{
        letter() {
          // console.log(this.letter);
          const element = this.$refs[this.letter][0]
          if (this.letter) {
            this.scroll.scrollToElement(element)
          }


        }
      },
      mounted() {

        this.scroll = new BetScroll(this.$refs.wrapper)

      },
      methods:{
        handleIndexCity(city){
          this.$store.commit('changeCity',city)
          this.$router.push('/')
        }
      }

    }
</script>

<style lang="stylus" scoped>
  .border-topbottom
    &:before
      background-color: #ccc
    &:after
      background-color: #ccc
  .border-bottom
    &:before
      background-color: #ccc
    &:after
      background-color: #ccc

  .list
    overflow:hidden
    position: absolute
    top:1.78rem
    left:0
    bottom:0
    right:0
  .wrapper
    width: 100%
    height:2000px


  .area
    .title
      line-height:.44rem
      background-color: #eee;
      padding-left:.2rem
      color: #666
      font-size:.26rem
    .button-list
      overflow:hidden
      padding:.1rem .4rem .1rem .1rem
      .button-wrapper
        float:left
        width:33.33%
        .button
          margin:.1rem
          padding:.1rem 0
          text-align:center
          border:.02rem solid #ccc
          border-radius:.06rem

    .item-list
      .item
        line-height:.76rem
        padding-left:.2rem


</style>
